$tips-background-color: #333;

body .layui-layer-tips .layui-layer-content {
  line-height: 1.5;
  padding: 8px 12px;
  border-radius: 4px;
  background-color: $tips-background-color;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
  word-wrap: break-word;
}

body .layui-layer-tips i.layui-layer-TipsG {
  border-width: 5px;
}

body .layui-layer-tips i.layui-layer-TipsR,
body .layui-layer-tips i.layui-layer-TipsL {
  top: 11px;
}

body .layui-layer-tips i.layui-layer-TipsT,
body .layui-layer-tips i.layui-layer-TipsB {
  left: 12px;
}

body .layui-layer-tips i.layui-layer-TipsT {
  bottom: -10px;
}

body .layui-layer-tips i.layui-layer-TipsT {
  border-right-color: transparent !important;
  border-top-style: solid;
  border-top-color: $tips-background-color;
}

body .layui-layer-tips i.layui-layer-TipsB {
  top: -10px;
}

body .layui-layer-tips i.layui-layer-TipsB {
  border-right-color: transparent !important;
  border-bottom-style: solid;
  border-bottom-color: $tips-background-color;
}

body .layui-layer-tips i.layui-layer-TipsL {
  right: -10px;
}

body .layui-layer-tips i.layui-layer-TipsL {
  border-bottom-color: transparent !important;
  border-left-style: solid;
  border-left-color: $tips-background-color;
}

body .layui-layer-tips i.layui-layer-TipsR {
  left: -10px;
}

body .layui-layer-tips i.layui-layer-TipsR {
  border-bottom-color: transparent !important;
  border-right-style: solid;
  border-right-color: $tips-background-color;
}

body .layui-layer-tips.layui-table-tips .layui-layer-content {
  background: 0;
  padding: 0;
  box-shadow: 0 1px 6px rgba($color-black, .12);
  line-height: 22px;
}

// Reference https://github.com/chinchang/hint.css
@media screen and (min-width: #{$grid-medium}){
  $hintErrorColor: $color-danger;
  $hintWarningColor: $color-warning;
  $hintInfoColor: $color-blue;
  $hintSuccessColor: $color-success;

  @import "./hint/hint.scss";
}

